<template>
  <div class="user-authority-manage w-full h-full">
    <div class="left-tree h-full">
      <div>
        <span>用户组织树</span>
      </div>
      <a-tree
        v-if="treeData.length > 0"
        v-model="selectedUser"
        @select="onSelect"
        :tree-data="treeData"
        :defaultExpandAll="true"
        :replace-fields="replaceFields"
      >
      </a-tree>
    </div>
    <div v-if="selectedUser.length > 0" class="right-table h-full">
      <div class="w-full h-half-full">
        <InterfaceRange class="w-full h-full" :userId="userId" />
      </div>
      <div class="bottom-content w-full display-flex h-half-full">
        <BusinessRange class="h-full w-half-full" :userId="userId" />
        <DataRange class="h-full w-half-full" :userId="userId" />
      </div>
    </div>
  </div>
</template>

<script>
import orupService from '@/api/orupService'
import InterfaceRange from './userAuthorityDetail/InterfaceRange.vue'
import BusinessRange from './userAuthorityDetail/BusinessRange.vue'
import DataRange from './userAuthorityDetail/DataRange.vue'

export default {
  name: 'UserAuthorityManage',

  data () {
    return {
      replaceFields: {
        key: 'id',
        title: 'name',
        children: 'children'
      },
      selectedUser: [],
      treeData: [],
      userId: ''
    }
  },

  components: {
    InterfaceRange,
    BusinessRange,
    DataRange
  },

  mounted () {
    this.loadLeftTree()
  },

  methods: {
    async loadLeftTree () {
      this.treeData = await orupService.orgUserTreeQuery()
    },
    onSelect (list) {
      this.selectedUser = list
      this.userId = this.selectedUser[this.selectedUser.length - 1]
    }
  }
}
</script>

<style lang="less" scoped>
.user-authority-manage {
  background: #fff;
  padding: 10px;
  color: rgba(0, 0, 0, .6);
  display: flex;
  flex-wrap: nowrap;

  .h-half-full {
    height: 50%;
  }
  .left-tree {
    width: 22%;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid #ccc;
  }
  .right-table {
    width: 78%;
    .bottom-content {
      flex-wrap: nowrap;
    }
  }
}

</style>
